<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.mobile/1.4.5/jquery.mobile.min.css" />
	<script src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
	<script src="//cdn.jsdelivr.net/jquery.mobile/1.4.5/jquery.mobile.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$( ":mobile-pagecontainer" ).pagecontainer( "load","http://www.baidu.com", { showLoadMsg:false} );
			
			//普通loading
			$( document ).on( "click", ".show-page-loading-msg", function() {
			    var $this = $( this ),
			        theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
			        msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
			        textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
			        textonly = !!$this.jqmData( "textonly" );
			        html = $this.jqmData( "html" ) || "";
			    $.mobile.loading( "show", {
			            text: msgText,
			            textVisible: textVisible,
			            theme: theme,
			            textonly: textonly,
			            html: html
			    });
			})
			.on( "click", ".hide-page-loading-msg", function() {
			    $.mobile.loading( "hide" );
			});
			
			//主题
			$( document ).on( "click", ".show-page-loading-msg", function() {
			    var $this = $( this ),
			        theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
			        msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
			        textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
			        textonly = !!$this.jqmData( "textonly" );
			        html = $this.jqmData( "html" ) || "";
			    $.mobile.loading( "show", {
			            text: msgText,
			            textVisible: textVisible,
			            theme: theme,
			            textonly: textonly,
			            html: html
			    });
			})
			.on( "click", ".hide-page-loading-msg", function() {
			    $.mobile.loading( "hide" );
			});
			
			
			//自定义html
			$( document ).on( "click", ".show-page-loading-msg", function() {
			    var $this = $( this ),
			        theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
			        msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
			        textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
			        textonly = !!$this.jqmData( "textonly" );
			        html = $this.jqmData( "html" ) || "";
			    $.mobile.loading( "show", {
			            text: msgText,
			            textVisible: textVisible,
			            theme: theme,
			            textonly: textonly,
			            html: html
			    });
			})
			.on( "click", ".hide-page-loading-msg", function() {
			    $.mobile.loading( "hide" );
			});
			
		})
	</script>
</head>
<body>

<div data-role="page">

	<div data-role="header">
		<h1>内容1</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>主题内容1
				<button data-inline="true" data-msgtext="" data-textvisible="false" data-textonly="false" class="show-page-loading-msg ui-btn ui-btn-inline ui-shadow ui-corner-all">Icon (default)</button>
				<button data-inline="true" data-msgtext="请稍后" data-textvisible="true" data-textonly="false" class="show-page-loading-msg ui-btn ui-btn-inline ui-shadow ui-corner-all">Icon + text</button>
				<button data-inline="true" data-msgtext="仅显示文字" data-textvisible="true" data-textonly="true" class="show-page-loading-msg ui-btn ui-btn-inline ui-shadow ui-corner-all">Text only</button>
				<button data-icon="delete" data-inline="true" class="hide-page-loading-msg ui-btn ui-icon-delete ui-btn-icon-left ui-btn-inline ui-shadow ui-corner-all">Hide</button>
				<hr />
				<button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-inline="true">A</button>
				<button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-inline="true">B</button>
				<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
				<hr />
				<button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-inline="true" data-html="<span class="ui-bar ui-shadow ui-overlay-d ui-corner-all"><img src="../_assets/img/jquery-logo.png"><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button>
				<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
				<hr />
				<a href="#n2" data-transition="fade">fade跳转到内容2</a><br />
				<a href="#n2" data-transition="pop">pop跳转到内容2</a><br />
				<a href="#n2" data-transition="flip">flip跳转到内容2</a><br />
				<a href="#n2" data-transition="turn">turn跳转到内容2</a><br />
				<a href="#n2" data-transition="flow">flow跳转到内容2</a><br />
				<a href="#n2" data-transition="slidefade">slidefade跳转到内容2</a><br />
				<a href="#n2" data-transition="slide">slidepop跳转到内容2</a><br />
				<a href="#n2" data-transition="slideup">slideuppop跳转到内容2</a><br />
				<a href="#n2" data-transition="slidedown">slidedownpop跳转到内容2</a><br />
				<a href="#n2" data-transition="none">none跳转到内容2</a><br />
		</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>尾部1</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<div id="n2" data-role="page">
	<div data-role="header">
		<h1>内容2</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>主题内容2
			<a href="" data-rel="back">Go back...</a>
			<a href="#dia" data-rel="dialog">dia</a>
		</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>尾部2</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<div id="dia" data-role="page">
		<div data-theme="a" data-role="header" role="banner" class="ui-header ui-bar-a"><a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-left" data-rel="back">Close</a>
		<h1 class="ui-title" role="heading" aria-level="1">Dialog</h1>
		</div>

		<div class="ui-content" role="main">
		<h1>I'm themed</h1>
		<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
			<a class="ui-btn ui-shadow ui-corner-all ui-btn-a" data-rel="back" href="">Good for you</a>
			<a class="ui-btn ui-shadow ui-corner-all ui-btn-a" data-rel="back" href="#">Don't care, really</a>
		</div>
</div>



</body>
</html>